<template>
    <view class="app-container balance">
        <zzk-nav title="我的余额" bgColor="#f56c6c" color="#fff"></zzk-nav>
        <view class="balance-box">
            <view class="balance-header">
				<view>
				    <text class="label">余额： {{ convertFenToYuan(balance) }}</text>
					<text class="label">线上收到押金： {{ convertFenToYuan(depositTotal) }}</text>
					<text class="label">其中在租押金： {{ convertFenToYuan(rentingDepositTotal) }}</text>
				</view>
                <view>
                    <text class="label">合计可提现金额</text>
                </view>
                <view class="value flexrow">
                    <text class="unit">¥</text>
                    <text class="price">{{ convertFenToYuan(withdrawable) }}</text>
                    <text class="to" @click="linkto('/pages/user/withdraw')">查看提现记录</text>
                </view>
            </view>
        </view>
        <view class="balance-withdraw">
            <view class="top">
                <text class="label">提现金额</text>
            </view>
            <view class="mid flexrow">
                <view>
                    <text class="unit">金额</text>
                </view>
                <view class="inputbox">
                    <input v-model="params.amount" class="input" type="digit" placeholder="示例值: 100.00">
                </view>
            </view>
            <!-- <view class="mid flexrow">
                <view>
                    <text class="unit">银行卡号</text>
                </view>
                <view class="inputbox">
                    <input class="input" type="number" placeholder="银行卡号">
                </view>
            </view> -->
            <view class="mid flexrow">
                <view>
                    <text class="unit">备注</text>
                </view>
                <view class="inputbox">
                    <textarea v-model="params.remark" class="textarea" placeholder="备注信息"></textarea>
                </view>
            </view>
        </view>
        <zzk-bottom>
            <view class="balance-bottom flexcolumn">
                <up-button text="申请提现" type="error" :loading="loading" @click="onSubmit"></up-button>
            </view>
        </zzk-bottom>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import { onLoad } from '@dcloudio/uni-app'
import { merchantInfo } from '@/api/user.js'
import { toWithdraw } from '@/api/merchant.js'
import { convertFenToYuan, linkto, showToast, bcmul } from '@/utils/util'
import WxValidate from '@/utils/WxValidate.js'

const store = useStore()
const balance = computed(() => store.state.user.balance)
const loading = ref(false)

const params = ref({
    amount: '',
    remark: ''
})

onLoad(() => {
    getInfo()
})

const getInfo = () => {
    merchantInfo().then(res => {
        store.commit('user/setParams', {
            balance: res.balance,
        })
    })
}

const onSubmit = () => {
    const rules = {
        amount: { required: true, price: true },
        remark: { required: true },
    }
    const messages = {
        amount: { required: '请输入提现金额' },
        remark: { required: '请输入提现备注' },
    }
    const wxv = new WxValidate(rules, messages)
    
    // 自定义验证规则
    wxv.addMethod('price', (value, param) => {
        let reg = /^(0*[1-9]\d*(\.\d{1,2})?|0*\.\d{1,2}[1-9]\d*)$/
        return reg.test(value)
    }, '请输入正确的金额，最多2位小数')
    
    if (!wxv.checkForm(params.value)) {
        const error = wxv.errorList[0]
        showToast(error.msg)
        return false
    }
    
    if (+params.value.amount > balance.value) {
        showToast('提现金额大于可提现金额')
        return false
    }
    
    const data = {
        amount: bcmul(params.value.amount, 100),
        remark: params.value.remark
    }
    loading.value = true
    toWithdraw(data).then(res => {
        loading.value = false
        params.value.amount = ''
        params.value.remark = ''
        showToast('提现成功')
    }).catch(e => {
        loading.value = false
    })
}
</script>

<style lang="scss" scoped>
.balance {
    &-box {
        background-color: $u-error;
        padding: 0 0 160rpx 48rpx;
        position: relative;
    }
    &-header {
        padding: 40rpx 0 0;
        border-radius: 16rpx;
        .label {
            font-size: 24rpx;
            line-height: 48rpx;
            color: #f5f5f5;
        }
        .value {
            margin: 20rpx 0 16rpx;
            align-items: flex-end;
        }
        .unit {
            font-size: 28rpx;
            line-height: 28rpx;
            margin-right: 8rpx;
            color: #fff;
            padding-bottom: 6rpx;
        }
        .price {
            font-size: 72rpx;
            line-height: 72rpx;
            color: #fff;
            flex: 1;
        }
        .to {
            font-size: 24rpx;
            background-color: #fff;
            color: $u-error;
            line-height: 48rpx;
            padding: 0 16rpx 0 32rpx;
            margin-bottom: 6rpx;
            border-top-left-radius: 24rpx;
            border-bottom-left-radius: 24rpx;
        }
    }
    &-withdraw {
        background-color: #fff;
        border-radius: 8rpx;
        margin: -120rpx $zzk-margin 0;
        position: relative;
        z-index: 2;
        padding: 24rpx;
        .label {
            font-size: 28rpx;
            line-height: 40rpx;
            color: #999;
        }
        .mid {
            border-bottom: $zzk-border 1rpx solid;
            padding: 8rpx 0;
            &:last-child {
                border-bottom: none;
            }
        }
        .unit {
            font-size: 28rpx;
            line-height: 80rpx;
            padding-right: 20rpx;
        }
        .inputbox {
            flex: 1;
        }
        .input {
            height: 80rpx;
            width: auto;
            font-size: 28rpx;
            width: 100%;
        }
        .textarea {
            background-color: #f5f5f5;
            width: 100%;
            box-sizing: border-box;
            font-size: 28rpx;
            line-height: 40rpx;
            padding: 20rpx;
            border-radius: 8rpx;
            display: block;
            height: 160rpx;
        }
    }
    &-bottom {
        flex: 1;
        padding: 0 $zzk-margin;
        justify-content: center;
    }
}
</style>